<template>
  <div>
    <div class="bottom">
      <ul :style="style">
        <li v-for="(item, index) in dataList" v-bind:key="index" @click="pageJump(item)" :class="getClass(item)">
          <p>{{ getText(item) }}</p>
          <p>{{ getCount(item) }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getDicts_archive } from "@/api/homePage";

export default {
  name: "dbDetailButton",
  props: ['source'],
  data() {
    return {
      dataList: [],
      // 对应数目
      dbCount: {},
      backgroundImage: '',
      style: '',
      addressOption: [],
      addressOption1: [],
    }
  },
  methods: {
    init(val, count) {
      // 中铁
      if (this.source == '1') {
        this.style = 'margin: 0.5vh 0 0 0;'
      } else {
        this.style = 'margin: 2vh 0 0 0;'
      }
      this.dataList = val.slice(0, 4)
      this.dbCount = count
      getDicts_archive('JUMP_ADDRESS').then(response => {
        this.addressOption = response.data
      })
      // console.log(val, count)
    },
    getClass(item) {
      // 根据元素的值获取对应的图片路径
      switch (item) {
        case 'DSH':
          return 'audit';
        case 'DGH':
          return 'returned';
        case 'JYZ':
          return 'borrow';
        case 'YYQ':
          return 'overdue';
        case 'DZJ':
          return 'testpaper';
        case 'DJS':
          return 'testdjs';
        case 'WDDY':
          return 'testwddy';
        case 'WDXZ':
          return 'testwdxz';
        case 'WDSC':
          return 'testwdsc';
        default:
          return '';
      }
    },
    getText(item) {
      // 根据元素的值获取对应的文本内容
      switch (item) {
        case 'DSH':
          return '待审核';
        case 'DGH':
          return '申请中';
        case 'JYZ':
          return '借阅中';
        case 'YYQ':
          return '已逾期';
        case 'DZJ':
          return '待组卷';
        case 'DJS':
          return '待接收';
        case 'WDDY':
          return '我的订阅';
        case 'WDXZ':
          return '我的下载';
        case 'WDSC':
          return '我的收藏';
        default:
          return '';
      }
    },
    getCount(item) {
      // 根据元素的值获取对应的文本内容
      switch (item) {
        case 'DSH':
          return this.dbCount.dshCount;
        case 'DGH':
          return this.dbCount.dghCount;
        case 'JYZ':
          return this.dbCount.jyzCount;
        case 'YYQ':
          return this.dbCount.yyqCount;
        case 'DZJ':
          return this.dbCount.dzjCount;
        case 'DJS':
          return this.dbCount.djsCount;
          case 'WDDY':
          return this.dbCount.wddyCount;
          case 'WDXZ':
          return this.dbCount.wdxzCount;
          case 'WDSC':
          return this.dbCount.wdscCount;
        default:
          return '';
      }
    },
    pageJump(item) {
      // 根据元素的值跳转不同页面
      switch (item) {
        case 'DSH':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'DSH') != undefined ? this.addressOption.find(item => item.dictValue == 'DSH').dictLabel : '/task/task' });
        case 'DGH':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'DGH') != undefined ? this.addressOption.find(item => item.dictValue == 'DGH').dictLabel : '/archiveBorrow/archiveBorrow', query: { status: 4 } });
        case 'JYZ':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'JYZ') != undefined ? this.addressOption.find(item => item.dictValue == 'JYZ').dictLabel : '/archiveBorrow/archiveBorrow', query: { status: 0 } });
        case 'YYQ':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'YYQ') != undefined ? this.addressOption.find(item => item.dictValue == 'YYQ').dictLabel : '/archiveBorrow/archiveBorrow', query: { status: 3 } });
        case 'DZJ':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'DZJ') != undefined ? this.addressOption.find(item => item.dictValue == 'DZJ').dictLabel : '/fileCollection/offlinReception' });
        case 'DJS':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'DJS') != undefined ? this.addressOption.find(item => item.dictValue == 'DJS').dictLabel : '/digitalizeReceive/electronicArchives/onlineReceivingRecords' });
        case 'WDDY':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'WDDY') != undefined ? this.addressOption.find(item => item.dictValue == 'WDDY').dictLabel : '/archiveBorrow/yqdy' });
        case 'WDXZ':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'WDXZ') != undefined ? this.addressOption.find(item => item.dictValue == 'WDXZ').dictLabel : '/archiveBorrow/myDownloads' });
        case 'WDSC':
          return this.$router.push({ path: this.addressOption.find(item => item.dictValue == 'WDSC') != undefined ? this.addressOption.find(item => item.dictValue == 'WDSC').dictLabel : '/archiveBorrow/myCollection' });
        default:
          return '';
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  ul {
    overflow: hidden;
    //margin: 2vh 0 0 0 ;
    padding: 0;
  }

  //height: 100px;
  ul li {
    float: left;
    list-style: none;
    width: 24%;
    // margin-right: 1%;
    // margin-bottom: 2%;
    padding: 2% 3%;
    height: 11vh;
    background-size: 100% 100%;

    p {
      font-size: 2vh;
      color: #ffffff;
      font-weight: bold;
      margin: 10px;
    }
  }

  .audit {
    background-image: url("../../assets/images/card-0.png");
  }

  .returned {
    background-image: url("../../assets/images/card-1.png");
  }

  .borrow {
    background-image: url("../../assets/images/card-2.png");
  }

  .overdue {
    background-image: url("../../assets/images/card-3.png");
  }

  .testpaper {
    background-image: url("../../assets/images/card-3.png");
  }

  .testdjs {
    background-image: url("../../assets/images/card-4.png");
  }

  .testwddy {
    background-image: url("../../assets/images/card-5.png");
  }

  .testwdxz {
    background-image: url("../../assets/images/card-6.png");
  }

  .testwdsc {
    background-image: url("../../assets/images/card-7.png");
  }
}
</style>
